<template>

   <div>
      <!-- 头部开始  -->
      <Header />
      <!-- 头部结束 -->

      <!-- 表单区域 -->
         <div class="div1">
            <!-- 表单分组 -->
         <van-cell-group>
               <van-field v-model="username" label='用户' placeholder="'请输入用户名" />
               <van-field v-model="password" label='密码' placeholder="'请输入密码" />
               <van-field v-model="password2" label='确认密吗' placeholder="'请输入确认密吗" />
               <van-field v-model="phone" label='您的手機號' placeholder="'请输入您的手机号" />
               <van-field v-model="email" label='您的郵箱' placeholder="'请输入您的邮箱" />
               <van-button  type='primary' @click="submit" >注册</van-button>
               <van-button  type='info' >重置</van-button>
               
         </van-cell-group>
         </div>
      <!-- 表单区域 -->
                  <!-- 完成注册功能(前后端)
                  将网站尾部包含进注册页面
                  完善字段(手机号/邮箱)
                  完成登录功能(多账号登录)
                  预习图片验证码 -->

         <Fooder/>
   </div>

</template>

<script>
import header from './header'
import fooder from './fooder'
export default {
   data(){
       return {
            username:'',
            password:'',
            password2:'',
            phone:"",
            email:''



       }
   },
   //声明组件
   components:{
      'Header':header,
      'Fooder':fooder,
      
   },
   methods:{
      submit(){
         if (this.username==''){
            this.$toast("请填写用户名")
            return false
         }
         if (this.password!=this.password2){
               alert('您输入的密码不一致')
         }else{
            console.log('改用戶的用戶名密码和邮件',this.username,this.password,this.phone,this.email);
               this.axios.post('http://127.0.0.1:8000/registers/',{"username":this.username,"password":this.password,"phone":this.phone,"email":this.email}).then(res=>{
               alert(res.data.message)
            })
            
         }
         
        
      }
   },
   created(){
       
   }
}
</script>

<style>
.div1{
   margin: 0 auto;
}
</style>